<template>
  <a-modal
    :title="title"
    :style="{ top: '10px' }"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button type="primary" @click="handleOk">审核</a-button>
      <a-button type="danger" @click="handleNo">驳回</a-button>
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-tabs :activeKey="activeKey" @change="callback">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="edit" />
            基本信息
          </span>
          <a-form :form="form">
            <template v-for="s in formData" >
              <a-form-item
                v-if="s.nType == '1'"
                :label="s.name"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 19}"
              >
                <a-input readOnly v-decorator="[ `${s.code}`, {rules: [{required: `${s.is_required}` == 'true'? true : false, message: `${s.name}` + '不能为空！'}]}]" />
              </a-form-item>
		                
              <a-form-item
                v-if="s.nType == '4'"
                :label="s.name"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 19}"
              >
                <a-input readOnly v-decorator="[ 't'+`${s.code}`]" />
		                  
              </a-form-item>
              <a-form-item
                v-if="s.nType == '3'"
                :label="s.name"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 19}"
              >
                <a-date-picker
                  disabled 
                  v-decorator="[`${s.code}`, {rules: [{required: `${s.is_required}` == 'true'? true : false, message: `${s.name}` + '不能为空！'}]}]"
                />          
              </a-form-item>
              <a-form-item
                v-if="s.nType == '2'"
                :label="s.name"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 19}"
              >
                <a-input readOnly v-decorator="[ `${s.code}`, {rules: [{required: `${s.is_required}` == 'true'? true : false, message: `${s.name}` + '不能为空！'}]}]" />
              </a-form-item>
            
              <a-form-item
                v-if="s.nType == '7'"
                :label="s.name"
                :labelCol="{span: 4}"
                :wrapperCol="{span: 19}"
              >
                <a-input v-decorator="[ 't'+`${s.code}`]" />
                 
              </a-form-item>
             
            </template>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" v-if="hasPerson">
          <span slot="tab">
            <a-icon type="team" />成员信息
          </span>
          <a-table
            class="components-table-demo-nested"
            ref="table" 
            :columns="columns" 
            :row-key="record => record.id" 
            :data-source="data" 
            :pagination="false">
                
            <span slot="status" slot-scope="text, record">
              <template>
                <a-tag :color="record.statusId==='0'?'#f50':'#87d068'" >
                  {{ text }}
                </a-tag>
              </template>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="4">
          <span slot="tab">
            <a-icon type="form" />审核意见
          </span>
          <span>
            <a-alert
              style="color: red;"
              v-if="alertVisible"
              message="审核意见不能为空!"
              type="error"
              closable
            />
          </span>
          <a-textarea
            style="margin-top: 10px;"
            v-model="opinion" 
            placeholder="请输入审核意见,不超过500字"
            :rows="4"
            maxLength="500"/>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <performance-person-add-modal ref="modal" @ok="handleddOk"></performance-person-add-modal>
  </a-modal>
</template>


<script>
import pick from 'lodash.pick'
  import {
    postAxiosUrl,
    getUrl
  } from '@/api/manage'
  import mySelect from '../../myComponent/MySelect'
  import moment from 'moment'
  import PerformancePersonAddModal from './PerformancePersonAddModal'
  
export default {
  components:{
    mySelect,
    PerformancePersonAddModal,
  },
  data () {
    return {
      id : '',
      settingId: '',
      checked : false,
      visible: false,
      alertVisible: false,
      confirmLoading: false,
      formData : [],
      form: this.$form.createForm(this),
      title : '',
      opinion: '',
      activeKey : '1',
      hasPerson : false,
      hasPaper : false,
      columns: [],
      data: [],
    }
  },
  created () {
   
  },
  methods: {
  add (settingId, activeName) {
    this.title=activeName
    this.activeKey = '1'
    this.opinion = ''
    this.id = 'new'+this.getUUID()
    this.visible = true
    this.settingId = settingId
    this.formData = []
    this.hasPerson = false
     this.hasPaper = false
    if(activeName == '教学论文'|| activeName == '科研论文'){
      this.hasPaper = true
    }
    this.fetch()
  },
  edit (record, settingId, activeName) {
    this.title=activeName
    this.id = record.id
    this.opinion = ''
    this.settingId = settingId
    this.activeKey = '1'
    this.visible = true
    this.formData = []
    this.hasPerson = false
    this.hasPaper = false
    if(activeName == '教学论文'|| activeName == '科研论文'){
      this.hasPaper = true
    }
    this.fetch(record)
  },
  callback(key){
    this.activeKey = key
    this.alertVisible = false
    if(this.activeKey == '2'){
      this.getData(this.id)
    }else if(this.activeKey == '3'){
      this.$nextTick(() => {
        this.$refs.paper.init(this.id, true)
      })
      
    }
  },
  fetch(record) {
    this.loading = true
    var _this = this
    return getUrl('cutSedSettingDetail/getDetail', {settingId : this.settingId})
      .then(data => {
        _this.formData = data.result.data
        _this.hasPerson = data.result.hasPerson
        if(record){
          _this.fetchContent(record)
        }
      })
  },
  getData(parentId) {
      var _this = this
       _this.myLoading = true
      getUrl('cutContentPerson/getAll', {contentId : parentId, settingId : this.settingId})
        .then(res => {
           _this.myLoading = false
          _this.data = res.result.data
          _this.columns = res.result.columns
        })
    
  },
  fetchContent(record) {
    this.confirmLoading = true
    var _this = this
    return getUrl('cutContent/getById', {id : this.id})
      .then(data => {
         _this.confirmLoading = false
        
          const { form: { setFieldsValue } } = _this
  
            _this.$nextTick(() => {
              var red = JSON.parse(data.result.cutContent.data)
             
              
              _this.formData.forEach((item, index) => {
                 if(item.n_type == '4' || item.n_type == '7'){
                  
                    setFieldsValue(pick(red, ['t'+item.code]))

                 }else if(item.n_type == '3'){
                   if(red[item.code] != ''){
                     setFieldsValue({
                       [item.code] : moment(red[item.code], 'YYYY-MM-DD'),
                     })
                   }
                 }else{
                   setFieldsValue(pick(red, [item.code]))
                 }
              })
          })
      })
  },
  handleSelectChange(v1, v2, id){
      var text = v2.componentOptions.children[0].text
      this.form.setFieldsValue({
        ['t'+id] : text,
      })
  },
  close () {
      this.$emit('close')
      this.visible = false
  },
  handleCancel () {
      this.close()
  },
  handleOk () {
      if(this.opinion == '' ||  this.opinion == null ||  this.opinion == undefined){
         this.alertVisible = true
         this.activeKey = '4'
      }else{
        this.alertVisible = false
        var _this = this
        postAxiosUrl('cutContent/approve', {opinion : this.opinion, id: this.id})
          .then(data => {
             if(!data.success){
                _this.$message.warning(data.error)
                _this.confirmLoading = false
              }else{
                _this.visible = false
                _this.confirmLoading = false
                _this.$emit('ok', '')
              }           
            })
      }
    },
    handleNo () {
        if(this.opinion == '' ||  this.opinion == null ||  this.opinion == undefined){
           this.alertVisible = true
           this.activeKey = '4'
        }else{
          this.alertVisible = false
          var _this = this
           _this.confirmLoading = true
          postAxiosUrl('cutContent/unApprove', {opinion : this.opinion, id: this.id})
            .then(data => {
               if(!data.success){
                  _this.$message.warning(data.error)
                  _this.confirmLoading = false
                }else{
                  _this.visible = false
                  _this.confirmLoading = false
                  _this.$emit('ok', '')
                }           
              })
        }
      },
    
    handleAddPerson(type){
      this.$refs.modal.add(this.settingId, this.id, type)
    },
    handleddOk(){
      this.getData(this.id)
    },
    confirm (record) {
      const me = this
            postAxiosUrl('cutContentPerson/del', {id : record.id})
              .then(res => {
                me.getData(me.id)
              })
    },
    handleEdit (record) {
        this.$refs.modal.edit(record, this.settingId, this.id)
    },
    cancel() {
      
    }
  }
}
</script>

<style>
  .ant-btn-danger{
        color: #ffffff;
        background-color: #f5222d;
  }
  .ant-btn-danger:focus {
      color: #ffffff;
      background-color: #f5222d;
      }
</style>
